<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
    }
    .layout-logo{
        width: 100px;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 520px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 10px;
    }
</style>
<template>
    <div class="layout">
        <div class="layout-content">
            <Row>
              
                <Col span="24">
                    <div class="layout-content-main">
                       <Button type="primary" @click=" onOpen">添加</Button> 
                        <Button type="error" @click="onDeletes">删除多条记录</Button>
                       <router-link to='/news'> <Button type="primary">新闻首页</Button></router-link>
    <Input v-model="filter.content" @on-enter="onSearch">
            <Button slot="append" icon="ios-search" @click="onSearch"></Button>           
        </Input>
    <Table border :columns="columns" :data="filter.list" @on-selection-change="onSelectionChange"></Table>
   <Page :total="filter.total" size="small"  
        show-total show-elevator show-sizer
        @on-change="onChange"
        @on-page-size-change="onPageSizeChange"></Page>
     <Modal
            v-model="modal"
            title="数据操作"
            width='1200'
        >
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate"  :label-width="80">                
                <FormItem label="作者" prop="appraiser">
                    <Input v-model="formValidate.appraiser" placeholder="作者名" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="内容" prop="content">
                    <quill-editor v-model="formValidate.content"
                ref="myQuillEditor"
                style="height:300px"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
                         </quill-editor>
                </FormItem>              
                <FormItem style="margin-top: 120px">
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
                    </div>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
import Base from '../../common/base'
export default {
      mixins: [Base],
    data () {
        return {
        newsId:'',
        module:'comment',
        formValidate: {//表单数据
                appraiser: '',
                content:'',
                belongId:''
            },
             filter:{ //分页数据
                list:[],//装载数据
                total:0,//总记录
                page:1,//页码
                limit:10,
                belongId:'',
                content:''
            },
             ruleValidate: {
                typeId: [
                    { required: true, message: '类别不能为空', trigger: 'blur' }
                ]
                },
                  columns: [
                {
                    type:'selection',
                    width:60,
                    align:'center'
                },
                {
                    title: '评价人',
                    key: 'appraiser',
                    render: (h, params) => {
                        return h('div', [
                            h('Icon', {
                                props: {
                                    type: 'person'
                                }
                            }),
                            h('strong', params.row.appraiser)
                        ]);
                    }
                },
                {
                    title: '评论内容',
                    key: 'content',
                    type:'html'
                },
             
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.update(params.row)
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        console.log(params);
                                        this.remove(params.row._id)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
        }
    },
    methods: {
        onOpen(){ 
                this.modal = true;
            Object.assign(this.$data.formValidate,this.$options.data().formValidate);
            this.formValidate.belongId=this.filter.belongId
             // 对象合并，并且初始表单数据
            }         
    },
    created () { 
       this.filter.belongId=this.$route.params.id;
    }
}
</script>